{% extends "data/base.html" %}
{% load thumbnail %}
{% block title %}搜索{% endblock %}
{% block content %}
    <form id="m_form">
        {% csrf_token %}
        <div class="row">
            <div class="col-6">
                <label for="id_search">搜索</label>
                <input type="text" name="keywords" id="id_search" class="form-control" required>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <button id="btn_search" class="btn btn-info">搜索</button>
            </div>
        </div>
    </form>
    <div id="id_search_result">{# 返回结果 #}</div>
{% endblock content %}

{% block script %}
    <script>
        $("#btn_search").click(function (evt) {
            evt.preventDefault();
            let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });
            // 发送
            $.post("{% url 'data:search' %}",
                {
                    "words": $("#id_search").val(),
                },
                function f(data) {
                    console.log(data);
                    $("#id_search_result").html(data);
                }
            );
        });
    </script>
{% endblock %}